<template>
  <view
    class="tui-countdown__verify"
    :class="{ 'tui-verify__opacity': status > 1 && isOpacity }"
    :style="{
      width: width,
      height: height,
      padding: padding,
      margin: margin,
      borderRadius: radius,
      fontSize: size + 'rpx',
      color: color,
      background: background,
    }"
    :hover-class="hover && status == 1 ? 'tui-verify__opacity' : ''"
    :hover-stay-time="150"
    @tap.stop="sendCode"
  >
    {{ showText }}
    <view
      class="tui-verify__line"
      :style="{ borderWidth: borderWidth, borderColor: borderColor, borderRadius: radius }"
    ></view>
  </view>
</template>

<script>
export default {
  name: 'tuiCountdownVerify',
  emits: ['send', 'countdown', 'end'],
  props: {
    //发送前显示文本
    text: {
      type: String,
      default: '发送验证码',
    },
    //发送中显示文本
    sendText: {
      type: String,
      default: '请稍候...',
    },
    //发送后显示文本(前面会自动加上seconds)
    countdownText: {
      type: String,
      default: 's后获取',
    },
    //倒计时秒数
    seconds: {
      type: Number,
      default: 60,
    },
    //宽度
    width: {
      type: String,
      default: '182rpx',
    },
    //高度
    height: {
      type: String,
      default: '56rpx',
    },
    padding: {
      type: String,
      default: '0',
    },
    margin: {
      type: String,
      default: '0',
    },
    //圆角
    radius: {
      type: String,
      default: '6rpx',
    },
    //字体大小 rpx
    size: {
      type: Number,
      default: 24,
    },
    //字体颜色
    color: {
      type: String,
      default: '#5677fc',
    },
    //背景色
    background: {
      type: String,
      default: 'transparent',
    },
    //边框宽度
    borderWidth: {
      type: String,
      default: '1px',
    },
    //边框颜色
    borderColor: {
      type: String,
      default: '#5677fc',
    },
    //倒计时的时候是否改变opacity值
    isOpacity: {
      type: Boolean,
      default: true,
    },
    //是否需要点击效果
    hover: {
      type: Boolean,
      default: true,
    },
    //短信发送成功（改变数值且数值大于0表示发送成功，多次发送数值递增即可）
    successVal: {
      type: Number,
      default: 0,
    },
    //重置组件状态（改变数值且数值大于0，多次重置数值递增即可）
    resetVal: {
      type: Number,
      default: 0,
    },
    //是否默认为倒计时状态
    start: {
      type: Boolean,
      default: false,
    },
    //自定义参数
    params: {
      type: [Number, String],
      default: 0,
    },
  },
  data() {
    return {
      showText: '',
      //1-发送前，2-发送中 3-发送成功，倒计时
      status: 1,
      countdownTimer: null,
    };
  },
  created() {
    if (this.start) {
      this.doLoop();
    } else {
      this.showText = this.text;
      this.clearTimer();
    }
  },
  // #ifndef VUE3
  beforeDestroy() {
    this.clearTimer();
  },
  // #endif
  // #ifdef VUE3
  beforeUnmount() {
    this.clearTimer();
  },
  // #endif
  watch: {
    successVal(val) {
      if (val && val > 0) {
        this.doLoop();
      }
    },
    resetVal(val) {
      if (val && val > 0) {
        this.reset();
      }
    },
  },
  methods: {
    sendCode() {
      if (this.status > 1) return;
      this.clearTimer();
      this.status = 2;
      this.showText = this.sendText;
      this.$emit('send', {
        params: this.params,
      });
    },
    doLoop: function () {
      this.clearTimer();
      this.status = 3;
      let seconds = this.seconds || 60;
      this.showText = seconds + this.countdownText;
      this.countdownTimer = setInterval(() => {
        if (seconds > 1) {
          --seconds;
          this.showText = seconds + this.countdownText;
          //倒计时
          this.$emit('countdown', {
            seconds: seconds,
            params: this.params,
          });
        } else {
          this.reset();
          //倒计时结束
          this.$emit('end', {
            params: this.params,
          });
        }
      }, 1000);
    },
    //验证码发送成功
    success() {
      this.doLoop();
    },
    //重置发送组件
    reset() {
      this.clearTimer();
      this.showText = this.text;
      this.status = 1;
    },
    clearTimer() {
      clearInterval(this.countdownTimer);
      this.countdownTimer = null;
    },
  },
};
</script>

<style scoped>
.tui-countdown__verify {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  box-sizing: border-box;
}

.tui-verify__opacity {
  opacity: 0.5;
}

.tui-verify__line {
  position: absolute;
  width: 200%;
  height: 200%;
  transform-origin: 0 0;
  transform: scale(0.5, 0.5) translateZ(0);
  box-sizing: border-box;
  border-style: solid;
  left: 0;
  top: 0;
  pointer-events: none;
}
</style>
